<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="ladder/css/ladder.css" />
    <link rel="stylesheet" href="ladder/css/ladder-chatbox.css" />

    <style>
        html,body{
            height: 100%;
        }


    </style>
</head>
<body>


<div class="ladder-chatbox" style="margin:0 auto 0">
    <div class="links">
        <div class="recent"><ul></ul></div>
        <div class="searchcontact"><input placeholder="查找联系人"></div>
    </div>
    <div class="chatdialogs">
        <div class="head">
            <div class="contactinfo"><div class="caption"></div><div class="tag"></div></div>
            <div class="controlarea"><div class="minimize"></div><i class="iconfont close">&#xe64e;</i></div>
            <i class="iconfont grouplist">&#xe625;</i>
        </div>
        <div class="frames">
        </div>
        <div class="sendarea">
            <textarea></textarea>
            <button class="send">发送</button>
        </div>

        <div class="memberlist hide">
            <ul>
                <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>    <li>小周昂扬</li>
                <li>肖昭阳</li>
                <li>李阳</li>
            </ul>


        </div>




    </div>






</div>




<script src="ladder/lib/require.js"></script>

<script>
    require(['ladder-form'],function () {
       
        
        


        Ladder.NS("Chat");
        
        Ladder.Chat=function () {
            this.container=$(".ladder-chatbox");
            this.init();
        }
        Ladder.Chat.prototype={

            init:function(){
                var me=this;
                //组装view


                //绑定事件
                
                me.container.find(".grouplist").click(function () {
                    me.container.find(".memberlist").toggle(500);
                })

                me.container.find(".chatdialogs>.sendarea>.send").click(function () {
                    me.sendMessage(me.container.find(".sendarea textarea").val())
					me.container.find(".sendarea textarea").val('');
                });

            },

            sendMessage:function(message,from,to){

                var me=this;
                var $li=$("<li></li>").appendTo(me.container.find(".chatdialogs .frames .frame.current ul"));
                if(from){
                      $('<div class="sign sign-'+from.type+' fl">'+from.linkman.substr(0,1)+'</div>').appendTo($li);
                }else{
                    $('<div class="sign sign-me fl">我</div>').appendTo($li);
                }
                $li.append('<div class="message">'+message+'</div>');
            },
            removeChat:function(){
               // alert(111);
            },
            addChat:function (contact) {
                var me=this;
                var $li = $('<li><div class="sign">'+contact.linkman.substr(0,1)+'</div><span class="contact">'+contact.linkman+'</span></li>')
                    .appendTo(me.container.find(".links>.recent ul"));
                $li.find(".sign").addClass("sign-"+contact.type);
                switch (contact.type){

                    case "system":
                        break;
                    case "friend":
                        $li.append('<i class="iconfont hide">&#xe796;</i>');
                        break;
                    case "group":
                        $li.append('<i class="iconfont hide">&#xe796;</i>');
                        break;
                }
                var $frame = $('<div class="frame"> <div class="showmore"><a>查看更多聊天</a></div><ul></ul></div>')
                    .appendTo(me.container.find(".chatdialogs>.frames"));;
                $li.click(function () {
                    $li.addClass("current").siblings().removeClass("current");
                    $frame.addClass("current").siblings().removeClass("current");
                    me.container.find(".chatdialogs>.head .caption").html(contact.linkman);
                    me.container.find(".chatdialogs>.head .tag").html(contact.tag);
                });
                $li.hover(function () {
                    $li.find(".iconfont").show();
                },function () {
                    $li.find(".iconfont").hide();
                });
                $li.find(".iconfont").click(function () {
                    me.removeChat();
                });
                $li.click();
            }
        }
        

        var chat=new Ladder.Chat();
        chat.addChat({type:"system",linkman:"系统消息",tag:"开发者中  developer.tripg.com"});
        chat.addChat({type:"friend",linkman:"肖昭阳",tag:"Ladder 研发工程师 YiFeng 驿枫"});
        chat.addChat({type:"group",linkman:"系统架构组",tag:"张立忠 大车 小月月"});
    });
</script>





</body>
</html>